<template>
  <div>
    <div id="commentDiv">
      <el-row>

        <!-- 头像 -->
        <el-col :span="3">
          <div class="block">
            <el-avatar :size="50" :src="commentItem.avatar"></el-avatar>
          </div>
        </el-col>

        <el-col :span="19">
          <!-- nickName + time -->
          <el-row style="line-height: 40px;">
            <el-col :span="9">
              {{commentItem.nickName}}
            </el-col>
            <el-col :span="8" :offset="6">
              {{commentItem.createTime}}
            </el-col>
          </el-row>
          <!-- 评论的内容 -->
          <el-row>
            <el-col :offset="1" v-html="commentItem.comment">
            </el-col>
          </el-row>
        </el-col>

      </el-row>
    </div>

  </div>
</template>

<script>
  export default {
    props: ['commentItem'],
    data() {
      return {

      }
    }
  }
</script>

<style scoped="scoped">
  #commentDiv {
    background-color: rgba(241, 241, 241, 0.5);
    width: 70%;
    margin-left: 8%;
    margin-top: 10px;
    border-radius: 10px;
    text-align: left;
    font-size: 14px;
    /* 字间距 */
    word-spacing: 10px;
    padding-left: 2%;
    padding-right: 2%;
  }

  .block {
    margin-top: 5px;
  }
</style>
